.foxui-select {
    display: inline-block;
    position: relative;
}

.foxui-select-handle {
    cursor: pointer;
    display: flex;
    align-items: center;

    input {
        padding-right: 30px;
    }

    &.foxui-select-icon {
        &::after {
            content: '\e8ad';
            position: absolute;
            right: 10px;
            font-family: 'foxuifont';
            display: inline-block;
            transform: rotate(0deg);
            margin-left: $--padding-extra-small;
            transition: $--all-transition;
            color: $--color-text-placeholder;
        }

        &.is-active {
            &::after {
                transform: rotate(180deg);
            }
        }

        &.is-disabled {
            color: $--color-text-placeholder;
            cursor: not-allowed;

            input {
                cursor: not-allowed;
                background-color: $--input-disabled-fill;
                border-color: $--input-disabled-border;
                color: $--input-disabled-color;
            }
        }
    }

    // 清空输入框 icon
    @include clear-input-icon();
}

// 设置
.foxui-select-settable {
    .foxui-select-handle {
        input {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            position: relative;
            z-index: 1;

            &:hover,
            &:focus {
                z-index: 2;
            }
        }

        button {
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            position: relative;
            left: -1px;
            z-index: 1;

            &:hover {
                z-index: 2;
            }
        }
    }
}

.foxui-select-settable-form {
    margin: 0 20px;

    p {
        margin-top: 6px;
        color: #909399;
        font-size: 12px;
    }
}

.foxui-select-menu {
    @include popper-panel;

    @include popper-slide('select');

    .foxui-select-slide {
        .foxui-select-item {
            position: relative;

            // 多选
            &.multiple {
                padding-right: 40px;

                &.is-active {
                    &::after {
                        content: '\e7c9';
                        font-family: 'foxuifont';
                        position: absolute;
                        right: 10px;
                    }
                }
            }

            &.is-active {
                color: $--color-primary;
            }
        }
    }
}
